﻿@{
    ViewBag.Title = "SetTransformSimple";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Set Transform Simple</h2>

<canvas id="testCanvas" width="200" height="200" style="border: #008000 solid 1px"></canvas>

<script type="text/javascript">
    var img;
    var stage;
    var angle;
    var scaleIndex;
    var sacleXArr = [ 1, 0.98, 0.96, 0.94, 0.92, 0.94, 0.96, 0.98, 1, 1.02,
        1, 0.98, 0.96, 0.94, 0.92, 0.94, 0.96, 0.98, 1, 1.02,
        1, 0.98, 0.96, 0.94, 0.92, 0.94, 0.96, 0.98, 1, 1.02,
        1, 0.98, 0.96, 0.94, 0.92, 0.94, 0.96, 0.98, 0.99];
    var sacleYArr = [ 1, 1.02, 1.04, 1.06, 1.08, 1.06, 1.04, 1.02, 1, 0.98,
        1, 1.02, 1.04, 1.06, 1.08, 1.06, 1.04, 1.02, 1, 0.98,
        1, 1.02, 1.04, 1.06, 1.08, 1.06, 1.04, 1.02, 1, 0.98,
        1, 1.02, 1.04, 1.06, 1.08, 1.06, 1.04, 1.02, 1.01 ];

    function init() {
        if (window.top != window) {
        	document.getElementById("header").style.display = "none";
        }

        angle = 0;
        scaleIndex = 0;
        img = new Image();
        img.onload = handleImageLoad;
        img.src = "/assets/pet.png";
    }

    function stop() {
		createjs.Ticker.removeEventListener("tick", tick);
    }

    function handleImageLoad() {
        var canvas = document.getElementById("testCanvas");
        stage = new createjs.Stage(canvas);
        stage.autoClear = true;
        bmp = new createjs.Bitmap(img);
        //bmp.regX = img.width >> 1;
        //bmp.regY = img.height >> 1;
        bmp.regX = img.width / 2;
        bmp.regY = img.height;
        //bmp.x = canvas.width - (img.width/2)>>1;
        //bmp.y = 140+canvas.height - (img.height/2)>>1;
        bmp.scaleX = bmp.scaleY = 0.1;
        stage.addChild(bmp);
        stage.update();

		createjs.Ticker.addEventListener("tick", tick);
    }

    function tick(event) {
        bmp.setTransform(img.width / 2, img.height, bmp.scaleX, bmp.scaleY, 0, bmp.skewX, bmp.skewY, bmp.regX, bmp.regY);
        bmp.scaleX = sacleXArr[scaleIndex]
        bmp.scaleY = sacleYArr[scaleIndex];
        stage.update(event);

        if (scaleIndex <= 37) {
            scaleIndex++;
        }
        else {
            scaleIndex = 0;
        }

        //ZEUS.DEBUG.log("x: " + bmp.x);
        //ZEUS.DEBUG.log("y: " + bmp.y);
    }

    window.onload = function () {
        init();
    }
</script>
